<template>
	<view class="page-items">
		<!-- 轮播图 -->
		<swiper :circular="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image class="swiper-img" src="https://img1.baidu.com/it/u=3718691209,1063635997&fm=253&fmt=auto&app=138&f=JPEG?w=568&h=323" mode="widthFix"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-img" src="https://img1.baidu.com/it/u=36775327,657313690&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="middle-box">
			<!-- 提示 -->
			<view class="tips-cont" @click="getCity">温馨提示：</view>
			<!-- 地址定位 -->
			<view class="address-box">
				<view class="address-title-list">
					<view class="left-label">当前城市</view>
					<view class="now-address" @click="showPermissionGuide">
						<u-icon name="map" color="#12a6dc"></u-icon>
						获取定位
					</view>
				</view>
				<view class="address-cont-list">
					<view class="left-cont" @click="handleCity">
						{{ selectedCity.cityName ? selectedCity.cityName : '请选择' }}
						<u-icon name="arrow-down-fill" color="#999" size="14px" />
					</view>
				</view>
				<view class="but-list" v-if="isLogin">
					<view class="login-car common-but" @click="handleScanCode">立即租车</view>
				</view>
				<view class="but-list" v-else>
					<view class="login-but common-but" @click="handleLogin">登录</view>
					<view class="select-car common-but" @click="handleScanCode">立即租车</view>
				</view>
				<view class="tag-name">
					<view class="icon-list">
						<u-icon name="map" color="#999"></u-icon>
						定点取还
					</view>
					<view class="icon-list">
						<u-icon name="rmb-circle" color="#999"></u-icon>
						先用后付
					</view>
					<view class="icon-list">
						<u-icon name="bag" color="#999"></u-icon>
						自租换电
					</view>
					<view class="icon-list">
						<u-icon name="level" color="#999"></u-icon>
						信用免押
					</view>
				</view>
			</view>
			<view class="more-but-list">
				<view class="common-cont" @click="handleScanCode">
					<view class="but-name">
						<u-icon name="map-fill" color="#ff781e" size="35rpx"></u-icon>
						附近场所
					</view>
					<view class="cont-detail">查看附近租聘场所</view>
				</view>
				<view class="common-cont" @click="handleTutorial">
					<view class="but-name">
						<u-icon name="file-text-fill" color="#ff781e" size="35rpx"></u-icon>
						用车指导
					</view>
					<view class="cont-detail">操作简单，智能便捷</view>
				</view>
			</view>
			<!-- 教程 -->
			<view class="lead-list">
				<view class="lead-title">
					<view class="lead-left">租车指南</view>
					<view class="lead-right" @click="handleTutorial">
						查看详情
						<u-icon name="arrow-right" color="#999" size="26rpx"></u-icon>
					</view>
				</view>
				<view class="img-list">
					<view class="lead-icon">
						<view class="lead-num">1</view>
						<u-icon name="scan" size="50rpx"></u-icon>
						<view class="lead-tip">扫码场所</view>
						<u-icon class="icon-next" color="#ccc" name="play-right-fill" />
					</view>
					<view class="lead-icon">
						<view class="lead-num">1</view>
						<u-icon name="checkmark-circle" size="50rpx"></u-icon>
						<view class="lead-tip">选择车辆</view>
						<u-icon class="icon-next" color="#ccc" name="play-right-fill" />
					</view>
					<view class="lead-icon">
						<view class="lead-num">1</view>
						<u-icon name="account" size="50rpx"></u-icon>
						<view class="lead-tip">使用车辆</view>
						<u-icon class="icon-next" color="#ccc" name="play-right-fill" />
					</view>
					<view class="lead-icon">
						<view class="lead-num">1</view>
						<u-icon name="reload" size="50rpx"></u-icon>
						<view class="lead-tip">归还车辆</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import QQMapWX from '@/libs/qqmap-wx-jssdk.js';

import Config from '@/core/config';

// 后端api地址
const apiUrl = Config.get('apiUrl');
const App = getApp();
export default {
	name: 'Page',
	components: {},
	/**
	 * 组件的属性列表
	 * 用于组件自定义设置
	 */
	props: {
		items: {
			type: Array,
			default() {
				return [];
			}
		},
		city: {
			type: String,
			default() {
				return '';
			}
		},
		address: {
			type: String,
			default() {
				return '';
			}
		},
		selectedCity: {
			type: Object,
			default() {
				return {};
			}
		},
		isLogin: Boolean
	},
	data() {
		return {};
	},

	methods: {
		getCity() {
			wx.getLocation({
				type: 'wgs84',
				success: (res) => {
					const location = `${res.latitude},${res.longitude}`;

					wx.request({
						url: apiUrl + 'address/getRegionByLocation',
						data: { location: location },
						method: 'POST',
						success: (res) => {
							// 处理返回的三级联动数据
							console.log(55555555555555);
						},
						fail: (error) => {
							console.log(222222, error);
						}
					});
				}
			});
		},

		//去登录
		handleLogin() {
			uni.navigateTo({
				url: '/pages/login/index'
			});
		},
		// 扫码
		handleScanCode() {
			if (this.selectedCity.cityCode) {
				uni.navigateTo({
					url: '/car/nearby-list/index'
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: '请先选择城市'
				});
			}
		},
		// 选择城市
		handleCity() {
			uni.navigateTo({
				url: `plugin://citySelector/index?key=${App.globalData.location.key}&referer=${App.globalData.location.referer}&hotCitys=${App.globalData.location.hotCitys}`
			});
			// uni.navigateTo({
			// 	url: '/car/city/index'
			// });
		},
		handleTutorial() {
			uni.navigateTo({
				url: '/car/tutorial/index'
			});
		},
		// 点击获取定位
		async showPermissionGuide() {
			// 检查权限状态
			const settingRes = await uni.getSetting();
			const hasPermission = settingRes.authSetting['scope.userLocation'];

			if (hasPermission === false) {
				// 明确拒绝状态
				uni.showModal({
					title: '位置权限已关闭',
					content: '需要开启定位权限才能提供服务',
					confirmText: '去设置',
					success: (modalRes) => {
						if (modalRes.confirm) {
							uni.openSetting({
								// 跳转系统权限设置页
								success: (settingRes) => {
									if (settingRes.authSetting['scope.userLocation']) {
										this.handleNewAddress(); // 重新获取定位
									}
								}
							});
						}
					}
				});
			} else {
				this.handleNewAddress(); // 重新获取定位
			}
		},
		// 获取定位
		handleNewAddress() {
			uni.getLocation({
				type: 'gcj02', // 必须使用GCJ-02坐标系
				altitude: true,
				success: (res) => {
					this.getCityCode(res.longitude, res.latitude);
					console.log('经度:', res.longitude);
					console.log('纬度:', res.latitude);
				},
				fail: (err) => {
					console.error('定位失败:', err);
				}
			});
		},
		//根据坐标获取城市编码信息
		getCityCode(longitude, latitude) {
			const qqmapsdk = new QQMapWX({
				key: App.globalData.location.key // 替换为你的 Key
			});

			qqmapsdk.reverseGeocoder({
				location: {
					latitude: latitude,
					longitude: longitude
				},
				success: (res) => {
					const result = res.result;
					console.log('行政区划信息:', result.ad_info); // 包含省市区编码
					this.selectedCity.cityName = result.ad_info.city;
					this.selectedCity.cityCode = result.ad_info.city_code.substring(3);
					// 修改属性（直接赋值）
					App.globalData.selectedCity = { ...this.selectedCity };
				},
				fail: (err) => {
					console.error('定位失败', err);
				}
			});
		}
	}
};
</script>
<
<style lang="scss">
.swiper-img {
	width: 100%;
}
.middle-box {
	width: 650rpx;
	margin: 0 auto;
}
.tips-cont {
	background-color: #e2f9ff;
	width: 600rpx;
	height: 70rpx;
	color: #12a6dc;
	border-top-right-radius: 35rpx;
	border-top-left-radius: 35rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: -70rpx auto 0;
	position: relative;
	z-index: 1;
}
.address-box {
	background-color: #fff;
	padding: 40rpx 30rpx 20rpx;
	box-sizing: border-box;
	border-radius: 35rpx;
}
.address-title-list {
	display: flex;
	color: #999;
	.left-label {
		width: 50%;
	}
	.now-address {
		display: flex;
		color: #12a6dc;
		margin-left: 100rpx;
	}
}
.address-cont-list {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.but-list {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	.common-but {
		height: 80rpx;
		color: #fff;
		background-color: #12a6dc;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 35rpx;
		font-weight: bold;
	}
	.login-but {
		width: 200rpx;
	}
	.select-car {
		width: 350rpx;
	}
	.login-car {
		width: 100%;
	}
}
.tag-name {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
	font-size: 25rpx;
	color: #999;
	.icon-list {
		display: flex;
	}
}
.more-but-list {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	.common-cont {
		width: 310rpx;
		background-color: #fff;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		.but-name {
			display: flex;
			align-items: center;
			font-size: 35rpx;
			font-weight: bold;
			color: #000;
			.u-icon {
				margin-right: 10rpx;
			}
		}
		.cont-detail {
			font-size: 25rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
}
.lead-list {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	.lead-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.lead-left {
			font-weight: bold;
		}
		.lead-right {
			font-size: 25rpx;
			color: #999;
			display: flex;
			align-items: center;
		}
	}
	.img-list {
		display: flex;
		margin-top: 20rpx;
		.lead-icon {
			width: 25%;
			flex-shrink: 0;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.lead-num {
				width: 25rpx;
				height: 32rpx;
				color: #fff;
				font-weight: bold;
				background-color: #12a6dc;
				font-size: 25rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4rpx;
				position: absolute;
				top: 0;
				left: 30rpx;
			}
			.icon-next {
				position: absolute;
				top: 50%;
				right: -10rpx;
				transform: translate(0, -50%);
			}
			.lead-tip {
				font-size: 25rpx;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
